<template>
     <h1>用户列表页面</h1>
     <router-link :to="{path:'/addUser'}">添加</router-link>
     <table border="1" width="800" align="center">
         <tr>
             <th>编号</th>
             <th>用户名</th>
             <th>年龄</th>
             <th>修改</th>
             <th>删除</th>
         </tr>
         <tr v-for="user in userList" :key="user.id">
             <td>{{user.id}}</td>
             <td>{{user.uname}}</td>
             <td>{{user.age}}</td>
             <td><router-link :to="{path:'/editUser',query:{id:user.id}}">修改</router-link></td>
             <td><a href="" @click.prevent="delUserById(user.id)">删除</a></td>
         </tr>
     </table>
</template>

<script>
   export default{

        name:"Users",
        data:function(){

            return {
                userList:[]
            }

        },
        methods:{

             getUsers:function(){

                    //从服务器端查询所有的用户
                    this.$axios.get("http://localhost:8080/users").then(resp=>{

                        this.userList=resp.data.data

                    })
             },
             delUserById:function(id){

                    if(confirm("确定要删除吗?"))
                    {
                        //将id传到服务器端做删除操作  
                        this.$axios.delete("http://localhost:8080/users/"+id).then(resp=>{

                            if(resp.data.code==200)
                                this.getUsers();

                        })
                    }

             }
        },
        mounted:function(){

               this.getUsers();

        }

   }
</script>
